<form class="px-[20px] pt-[15px]" nz-form nzLayout="inline" [formGroup]="validateForm" (ngSubmit)="changeGroupName()">
  <nz-form-item>
    <nz-form-control nzErrorTip="Please input groupName" [nzValidateStatus]="validateForm.controls['name']">
      <div class="flex items-center">
        <ng-container *ngIf="isEdit">
          <div class="invisible px-[20px] min-w-[151px]">{{ validateForm.value.name }}</div>
          <input
            #groupNameInputRef
            class="absolute"
            eo-ng-input
            autofocus
            placeholder="Group Name"
            (blur)="changeGroupName()"
            formControlName="name"
            id="name"
          />
        </ng-container>
        <ng-container *ngIf="!isEdit">
          <h4 nz-typography class="!mb-[0px]">{{ validateForm.value?.name }}</h4>
          <button eo-ng-button nzType="text" class="ml-[5px]" (click)="startEditGroupName()">
            <eo-iconpark-icon name="edit"></eo-iconpark-icon>
          </button>
          <button (click)="group.toDelete(model)" eo-ng-button nzType="text" class="ml-[5px]">
            <eo-iconpark-icon name="delete"></eo-iconpark-icon>
          </button>
        </ng-container>
      </div>
    </nz-form-control>
  </nz-form-item>
</form>

<nz-divider></nz-divider>
<eo-ng-tabset class="block px-[20px] overflow-auto">
  <eo-ng-tab i18n-nzTitle nzTitle="Authorization">
    <div class="text-tips mt-[15px] mb-[13px]" i18n>
      Authorzation will take effect for each API under the group during testing, and you can also override the authorization in the API.
    </div>
    <authorization-extension-form
      *ngIf="model?.authInfo"
      #authExtForm
      [(model)]="model.authInfo"
      [inheritAuthType]="initialModel?.authInfo?.authType"
      [parentInfo]="model"
      (modelChange)="emitChange($event)"
    >
    </authorization-extension-form>
    <button type="submit" eo-ng-button nzType="primary" [nzLoading]="!globalStore.isLocal && isSaving" (click)="saveGroupInfo()" i18n>
      Save
    </button>
  </eo-ng-tab>
</eo-ng-tabset>
